<template>
  <div
    class="global-sidebar"
    :class="{
      'admin-sidebar': isAdmin,
      collapsed: collapsed,
    }"
  >
    <!-- Element Plus 前台侧边栏 -->
    <template v-if="!isAdmin">
      <el-menu
        :default-active="activeMenu"
        :collapse="collapsed"
        :unique-opened="true"
        :router="true"
        class="el-menu-vertical"
      >
        <template v-for="item in menuItems" :key="item.path">
          <!-- 子菜单 -->
          <template v-if="item.children && item.children.length">
            <el-sub-menu :index="item.path">
              <template #title>
                <el-icon v-if="item.icon"
                  ><component :is="item.icon"
                /></el-icon>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item
                v-for="child in item.children"
                :key="child.path"
                :index="child.path"
              >
                <el-icon v-if="child.icon"
                  ><component :is="child.icon"
                /></el-icon>
                <span>{{ child.title }}</span>
              </el-menu-item>
            </el-sub-menu>
          </template>

          <!-- 单个菜单项 -->
          <template v-else>
            <el-menu-item :index="item.path">
              <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
              <span>{{ item.title }}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </template>

    <!-- Arco Design 后台侧边栏 -->
    <template v-else>
      <a-menu
        :default-selected-keys="[activeMenu]"
        :collapsed="collapsed"
        :auto-open="true"
        show-collapse-button
        @collapse="handleCollapse"
      >
        <template v-for="item in menuItems" :key="item.path">
          <!-- 子菜单 -->
          <template v-if="item.children && item.children.length">
            <a-sub-menu :key="item.path">
              <template #icon>
                <icon-component v-if="item.icon" :type="item.icon" />
              </template>
              <template #title>{{ item.title }}</template>
              <a-menu-item
                v-for="child in item.children"
                :key="child.path"
                @click="handleMenuClick(child.path)"
              >
                <template #icon>
                  <icon-component v-if="child.icon" :type="child.icon" />
                </template>
                {{ child.title }}
              </a-menu-item>
            </a-sub-menu>
          </template>

          <!-- 单个菜单项 -->
          <template v-else>
            <a-menu-item :key="item.path" @click="handleMenuClick(item.path)">
              <template #icon>
                <icon-component v-if="item.icon" :type="item.icon" />
              </template>
              {{ item.title }}
            </a-menu-item>
          </template>
        </template>
      </a-menu>
    </template>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";

const props = defineProps({
  isAdmin: {
    type: Boolean,
    default: false,
  },
  menuItems: {
    type: Array,
    required: true,
    default: () => [],
  },
  collapsed: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:collapsed", "menu-click"]);

const route = useRoute();
const router = useRouter();

// 当前激活的菜单项
const activeMenu = computed(() => route.path);

// 处理菜单点击
const handleMenuClick = (path) => {
  emit("menu-click", path);
  router.push(path);
};

// 处理折叠状态
const handleCollapse = (value) => {
  emit("update:collapsed", value);
};
</script>

<style lang="scss" scoped>
.global-sidebar {
  @apply h-full bg-white border-r border-gray-200;
  transition: width 0.3s;

  &.admin-sidebar {
    @apply bg-[#001529];

    :deep(.arco-menu) {
      @apply bg-transparent;
    }
  }

  &.collapsed {
    :deep(.el-menu) {
      @apply w-16;
    }
  }
}

.el-menu-vertical {
  @apply h-full border-r-0;

  :deep(.el-menu-item),
  :deep(.el-sub-menu__title) {
    @apply flex items-center;
  }
}

:deep(.el-menu--collapse) {
  @apply w-16;
}

:deep(.el-menu-item.is-active) {
  @apply bg-primary-50;
}

:deep(.arco-menu-item) {
  &:hover {
    @apply bg-primary-900 bg-opacity-50;
  }

  &.arco-menu-selected {
    @apply bg-primary-900;
  }
}

:deep(.arco-menu-inline-header) {
  &:hover {
    @apply bg-primary-900 bg-opacity-50;
  }
}
</style>
